import React from "react";
import {Col, DatePicker, Modal, Radio, Row} from "antd";
import {dayDiff, defaultEnd, defaultStart, mb16} from "../user-total/user-total";
import ActivitySummary from "../../../component/ActivitySummary/ActivitySummary";
import UserModel from "../../../model/user";
const { RangePicker } = DatePicker

class UserActivityModal extends React.Component {

    constructor(props) {
        super(props)
        this.model = new UserModel()
        this.state = {
            dayDiff: dayDiff,
            start: defaultStart,
            end: defaultEnd,
            zhuanfa: 0,
            xinwen: 0,
            shiping: 0,
            liaotian: [],
            shichang: 0,
            behavior: [],
            liaotianFlag: 1,
        }
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (this.props.visible && prevProps.visible === false) {
            const id = this.props.user.Id
            this.activity(id)
            this.liaotian(id)
            this.shichang(id)
        }
        if (this.props.visible === false && prevProps.visible) {
            this.setState({
                start: defaultStart,
                end: defaultEnd,
                dayDiff: dayDiff,
            })
        }
    }

    formatTime = (moment) => {
        return parseInt(moment.format('X'))
    }

    activity = (id) => {
        return this.model
            .activity({
                starttime: this.formatTime(this.state.start),
                endtime: this.formatTime(this.state.end),
                userid: id,
            })
            .then(values => {
                const [zhuanfa, xinwen, shiping,] = values
                this.setState({
                    zhuanfa,
                    xinwen,
                    shiping,
                })
            })
    }

    liaotian = (id) => {
        return this.model
            .liaotianOne({
                // starttime: this.formatTime(this.state.start),
                // endtime: this.formatTime(this.state.end),
                Flag: this.state.liaotianFlag,
                Id: id,
            })
            .then((res) => {
                const liaotian = [...res.data.ok]
                this.setState({
                    liaotian,
                })
            })
    }

    shichang = (id) => {
        return this.model
            .shichang({
                starttime: this.formatTime(this.state.start),
                endtime: this.formatTime(this.state.end),
                id: id,
            })
            .then((res) => {
                this.setState({
                    shichang: res.data.ok,
                })
            })
    }


    onDateChange = (value,) => {
        const [start, end,] = value
        const dayDiff = end.diff(start, 'day')
        const id = this.props.user.Id
        this.setState({
            start,
            end,
            dayDiff,
        }, () => {
            // this.get()
            this.activity(id)
            this.liaotian(id)
        })
    }

    render() {
        const activityModal = <Modal
            titile="查看活跃度"
            width='80%'
            visible={this.props.visible}
            footer={null}
            maskClosable={true}
            onCancel={this.props.onCancel}
            destroyOnClose
        >
            <Radio.Group
                value={this.state.liaotianFlag === 1}
                defaultChecked={false}
                onChange={(e) => {
                    this.setState({
                        liaotianFlag: e.target.value ? 1 : 2,
                    }, () => this.liaotian(this.props.user.Id))
                }}
            >
                <Radio value={true}>足球</Radio>
                <Radio value={false}>篮球</Radio>
            </Radio.Group>

            <Row style={{...mb16, marginTop: '16px',}}>
                <Col span={6}>
                    <span>选中共 {this.state.dayDiff} 日：</span>
                </Col>
                <Col span={18}>
                    <RangePicker
                        showTime={{ format: 'HH:mm:ss' }}
                        format="YYYY-MM-DD HH:mm:ss"
                        onChange={this.onDateChange}
                        onOk={this.onDateOk}
                        defaultValue={[
                            this.state.start,
                            this.state.end,
                        ]}
                    />
                </Col>
            </Row>
            <ActivitySummary
                user={this.props.user}
                activity={{
                    zhuanfa: this.state.zhuanfa,
                    total: this.state.total,
                    shiping: this.state.shiping,
                    xinwen: this.state.xinwen,
                    shichang: this.state.shichang,
                    liaotian: this.state.liaotian,
                }}
                liaotianFlag={this.state.liaotianFlag - 1}
            />


        </Modal>
        return activityModal
    }

}

export default UserActivityModal